import React,{CSSProperties, useEffect,useState} from 'react'
import { Carousel } from 'antd';
import { getSwiper,getSwiperAns } from '../../../api/swiper';

const containerStyle: CSSProperties = {
    borderRadius: '10px 30px 10px 10px',
    overflow: 'hidden',
    zIndex: 50
}
const imgStyle: CSSProperties = {
    width: '100%'
}
const underSwiper: CSSProperties = {
    position: 'relative'
}
const HomeSwiper = () => {
    const [imgList,setList] = useState<Array<any>>([{}])
    useEffect(() => {
        getSwiper()
            .then(res => {
                const {code,data} =  res  as unknown as getSwiperAns
                if(code === 200){
                    setList(data)
                }
            })
            .catch(err => {
                console.log(err);
            })
    },[])
    return (
        <>
        <div style={containerStyle}>
            <Carousel autoplay>
                {
                    imgList?.map(item => {
                        return (
                            <div key={item.swiperId + item.swiperImg} >
                                <img src={item.swiperImg} alt="轮播图片"  style={imgStyle}/>
                            </div>
                        )
                    })
                }
            </Carousel>
            <div style={underSwiper}>
                <img src="/assets/picsrc/underSwiper.png" alt="" style={imgStyle}/>
                <img src='/assets/picsrc/unserSwiperIcon.png' alt="iconArrow" style={{position: 'absolute', top: 0, right: '5vw',width: '10%'}}/>
            </div>
        </div>
        </>
    )
}

export default HomeSwiper